درسنامه آموزشی پودمان 3 نگهداری سیستم‌های رایانه‌ای کلاس دهم شبکه و نرم افزار

آیا تا به حال اندیشیده‌اید

1- یک بازی خاص را خودتان طراحی کنید؟
2- چگونه می‌توانید از مهارت‌های یادگیری بازی‌سازی در آینده شغلی خود استفاده کنید؟
3- چگونه می‌توانید از بازی‌های خود برای الهام بخشیدن به دیگران استفاده کنید؟

از هنرجو انتظار می‌رود در پایان این واحد یادگیری

- وارد محیط App Inventor شود.
- تنظیمات App Inventor را روی سیستم خود انجام دهد.
- افزونه MIT AI2 Compamion را روی تلفن همراه خود نصب نماید.
- بازی‌های ساده در محیط App Inventor ایجاد و اجرا نماید.
- بازی‌های ایجاد شده را خطایابی نماید.
- بازی‌های نوشته شده‌اش را با دیگران به اشتراک بگذارد.

استاندارد عملکرد

هنرجو بتواند انواع بازی‌ها را با کمک محیط App Inventor بنویسد و با دیگران به اشتراک بگذارد.

امروزه گوشی‌های همراه هوشمند و نرم‌افزارها و برنامه‌ها و اپلیکیشن‌های موبایلی بخش مهمی از زندگی همه ما شده است. پیام‌رسان‌ها، همراه بانک‌ها، تاکسی‌های اینترنتی، بازی‌ها، اپلیکیشن‌های مسیریاب، برنامه‌های محاسباتی و پرداخت‌های اینترنتی و... بخشی از برنامه‌های موبایلی هستند که زندگی ما با آن‌ها گره خورده است.

آیا تابه‌حال به این فکر کرده‌اید که این برنامه‌ها چگونه ایجاد می‌شوند؟

App Inventor یک سرویس رایگان، متن باز (open source)، مبتنی بر اَبر (Cloud-Base) و آنلاین است که امکان ایجاد بازی‌های موبایلی و اجرای آن‌ها را به کاربر می‌دهد. از برنامه‌نویسی بلوکی (Block-Based) استفاده می‌کند. در این محیط برنامه‌نویسی کاربران بدون نیاز به نوشتن کدهای متنی با کشیدن و اتصال بلوک‌های بصری (شبیه به پازل) منطق برنامه را می‌سازند. به لطف محیط بلوکی خود، یکی از محبوب‌ترین محیط‌های طراحی اپلیکیشن‌های اندروید می‌باشد.

این برنامه یک رابط کاربری گرافیکی (GUI) شبیه به محیط برنامه‌نویسی اسکرچ (Scratch) و استار لوگو (StarLogo) دارد. کاربر می‌تواند اشیای موردنیاز خود را به داخل صفحه کشیده و رها کند و سپس در بخش بلوک فعالیت‌های هر شیء را به آن اختصاص دهد. برنامه‌نویسی شیءگرا یکی از پرکاربردترین و محبوب‌ترین روش‌های برنامه‌نویسی است.

ورود به محیط برنامه App Inventor

1- عبارت App Inventor را در نوار جستجو تایپ کنید و وارد سایت appinventor.mit.edu شوید و روی دکمه create Apps کلیک کنید (شکل 73).

2- در صفحه باز شده حساب کاربری Gmail را که قبلاً ایجاد کرده‌اید انتخاب کنید تا به شما یک پروفایل اختصاص داده شود (شکل 74).

3- سپس continue را کلیک کنید (شکل 75).

4- در صفحه Terms of sevice دکمه I accept the terms of service را کلیک کنید (شکل 76).

5- در صفحه جدید روی دکمه Skip for Now, go to MIT App inventor کلیک کنید (شکل 77).

6- پنجره خوشامدگویی نمایش داده می‌شود. گزینه do not show again را تیک‌دار کنید تا در مراحل بعدی این صفحه نمایش داده نشود و countinue را برای اجرای برنامه کلیک کنید (تصویر 78).

7- در پنجره بعدی نکاتی به منظور راهنمایی‌های اولیه برای آشنایی کاربر با محیط نرم‌افزار وجود دارد؛ با انتخاب گزینه start a blank project یک پروژه جدید ایجاد کنید.

برای ایجاد پروژه جدید روی زبانه project در بالای صفحه و انتخاب گزینه start a New project و یا دکمه new project+ در گوشه سمت چپ بالای صفحه نیز کلیک کنید (شکل 79).

8- در پنجره create new app inventor project یک نام برای پروژه ثبت کنید و پنجره را تأیید کنید. نام انتخاب شده باید با حروف انگلیسی باشد، در صورتی که در نام انتخابی کاراکتر فاصله وجود داشته باشد نرم‌افزار این کاراکتر را به کاراکتر خط تیره تبدیل می‌کند به‌طور مثال در صورت انتخاب نام "Test 1"، نرم‌افزار آن را به‌صورت "Test_1" تصحیح می‌نماید (شکل 80).

9- پس از انتخاب نام پروژه، پنجره (شکل 81) نمایش داده می‌شود. در گوشه بالای سمت راست پنجره دوسربرگ وجود دارد:

1- سربرگ Designe: طراحی رابط کاربری و ظاهر نرم‌افزار در این بخش قابل طراحی می‌باشد. در طراحی محیط یک بازی، برای جذب بهتر مخاطب مناسب‌تر است به نکات روان‌شناسی رنگ با توجه به سن مخاطبین بازی دقت داشته باشید. به‌طور مثال رنگ زرد علامت هشدار است، برای بزرگسالان ناخوشایند اما برای کودکان جذاب است. رنگ نارنجی علامت هشدار بدون خطر، انرژی، ورزشی و مورد علاقه کودکان می‌باشد، و... .

برای جذب مخاطب شما علاوه بر یک رابط کاربری مناسب که شامل رنگ‌ها، اندازه‌ها، صداها، انیمیشن و.... هر آنچه از محیط یک برنامه دیده می‌شود نیاز به داشتن یک تجربه کار خوب و راحت نیز دارید. اگر برنامه‌ای به دفعات در بین مراحل کاری خطا بدهد کار با آن دشوار خواهد بود. اگر ادامه مسیر یا روش کار با یک برنامه، مشخص و قابل درک نباشد ادامه کار با آن را با مشکل روبرو خواهد کرد.

رنگ‌ها و تصاویر و اشکالی که در طراحی رابط کاربری نرم‌افزار خود استفاده می‌کنید در جذب کاربر مؤثر می‌باشد.

با کلیک روی این زبانه می‌توانید بخش‌های زیر را در آن مشاهده کنید:

بخش pallete: شامل تمامی اشیایی می‌باشد که در این نرم‌افزار وجود دارند. هریک از گزینه‌های این بخش خود شامل زیرمجموعه‌هایی می‌باشد. با کلیک روی هر دسته می‌توانید به اشیای هر زیر مجموعه دسترسی پیدا کنید.

بخش viewer: ظاهر نهایی برنامه را نشان می‌دهد هر شیء از بخش pallete را با drag & drop با این بخش وارد کنید. در بالای این بخش، دو کادر وجود دارد توسط کادر اول می‌توانید تنظیمات اندازه صفحه برنامه را تعیین کنید. در کادر دوم می‌توانید نسخه اندرویدی که برنامه با آن امکان اجرا دارد تعیین کنید.

بخش all component: اشیایی که در صفحه viewer وارد کرده اید در اینجا دیده می‌شوند (شکل 81). می‌توانید هر کدام را انتخاب کرده و در صورتی که نیاز ندارید دکمه delete از صفحه کلید را بزنید و یا در همین قسمت روی دکمه delete پایین کادر کلیک کنید.

علاوه بر دکمه delete در پایین این کادر دکمه Rename وجود دارد که با انتخاب یک شیء و کلیک کردن این دکمه می‌توانید نام شیء را تغییر دهید (شکل 84).

بخش Properties: هر کدام از اشیای موجود در بخش allcomponent و یا viewer را که انتخاب کنید توسط گزینه‌های این بخش می‌توانید تغییراتی روی رنگ و فونت و اندازه و شکل و.... آن‌ها ایجاد کنید. این ویژگی‌ها برخی به‌صورت مشترک در اشیای مختلفی وجود دارند و برخی منحصر به یک شیء خاص هستند. در جدول بالا این ویژگی‌ها لیست شده‌اند. (شکل 84)

2- سربرگ Blocks: برای اینکه هر کدام از اشیا فعالیتی انجام دهد نیاز است که بلوک‌های کدنویسی را اضافه کنید. با کلیک روی زبانه Blocks در بالای صفحه وارد قسمت کدنویسی شوید (شکل 85).

بلوک‌های موجود در محیط برنامه‌نویسی در این قسمت قرار دارند، با Drag کردن هر بخش به ناحیه Viewer می‌توانید از آن استفاده نمایید. این سربرگ شامل بخش‌های زیر می‌باشد:

3- ستون Blocks: این ستون وجه تمایز این برنامه‌نویسی با سایر شیوه‌های برنامه است که ایجاد و توسعه برنامه‌ها را آسان کرده است. در این ستون یک بخش ثابت به نام Built - in قرار دارد و دستورات آماده را شامل می‌شود. گزینه‌های این بخش در جدول 1 آورده شده است. در این ستون اشیایی را که در زمان طراحی برنامه استفاده کرده‌اید در بخش All components قرار دارد. بر روی گزینه‌ای در ستون Blocks کلیک کنید در بخش viewer بلوک‌های کدنویسی مرتبط با آن نمایش داده می‌شود.

جدول 1 - گزینه‌های موجود در بخش Built - in

بلوک	فعالیت‌هایی که توسط این بخش می‌توان انجام داد	توضیح عملیات بلوک
Control	بلوک‌های تصمیم‌گیری و حلقه‌های تکرار (تمامی دستورات منطقی مانند False ،True و...)	تصمیم‌گیری مانند وقتی که از بین دو انتخاب باید یکی را انتخاب کنید، مثلاً اگر عدد زوج است بنویس زوج و الا بنویس فرد. حلقه تکرار اعداد یک تا 100 را بنویس.
Logic	مقدارهای True و False و عملگرهای منطقی AND و OR و NOT	خاصیت‌های دو حالتی مانند Visible که می‌تواند True یا False باشد.
Math	کلیه دستورات ریاضی جمع و تفریق و...	شمارش مراحل بازی، امتیاز به دست آمده و...
Text	کلیه متن‌ها و عملیات روی متن مانند مقایسه و اتصال و...	ترکیب نام و نام‌خانوادگی یک شخص و الحاق آن به متن برای ارسال پیامک.
List	فرمان‌های ایجاد و استفاده انواع لیست	مانند لیست مدرک تحصیلی در یک فرم ثبت‌نام
Color	رنگ‌های استاندارد و پر کاربرد و دستور ایجاد رنگ با کمک مقادیر R,G,B	در صفحه بازی می‌توانید در صوت برد یا باخت بازیکن رنگ خاصی را نمایش دهید.
Variable	دستورات ایجاد متغیرها	متغیری را تعریف کنید که مراحل بازی یا امتیاز بازیکنان در مراحل مختلف را ذخیره کند.
Procedure	ایجاد تابع	می‌توانید از طریق این بخش فعالیتی که در قسمت‌های مختلف برنامه تکرار می‌شود به یک تابع تبدیل کنید و در قسمت‌های مختلف فقط آن تابع را فراخوانی کنید. مانند تابع محاسبه فاکتوریل

بخش viewer: این بخش با توجه به برنامه ایجاد شده متفاوت است و تمامی اشیائی که در سربرگ design در صفحه قرار داده‌اید در اینجا لیست شده‌اند و با کلیک روی هر کدام توابع و دستورات مرتبط با آن را می‌توانید ببینید و برای استفاده در بلاک‌هایتان می‌توانید استفاده کنید.

بخش کوله‌پشتی: کدهای ایجاد شده در برنامه در این قسمت نمایش داده می‌شوند. در قسمت کوله‌پشتی می‌توانید کدی که در این برنامه نوشته‌اید و در سایر برنامه‌هایتان نیز برایتان کاربرد دارند قرار دهید (کافیست کد را روی کوله‌پشتی درگ نمایید). حال فقط کافیست در سایر برنامه‌ها کوله‌پشتی را باز کنید و از کدهای موجود در کوله‌پشتی، بدون اینکه نیاز باشد مجدد ایجادشان کنید استفاده کنید. مانند کدهای دریافت رمز ورود به برنامه که در اکثر برنامه‌ها به آن نیاز دارید.

بخش نمایش خطاها: در صورتی که در هنگام ایجاد کد خطایی داشته باشید مثلاً تعدادی کد اضافه در صفحه آورده باشید و در هیچ قسمتی استفاده نکرده باشید در این بخش خطا دیده می‌شود و برای رفع خطا نیاز هست این کدهای اضافه را حذف کنید.

بخش سطل زباله: کدهایی که به قسمت Viewer آورده‌اید و دیگر به آن‌ها نیازی ندارید و در برنامه‌تان استفاده نمی‌شوند را کافیست به سمت سطل زباله درگ کنید تا از صفحه حذف شوند.

بخش بزرگ‌نمایی و کوچک‌نمایی: باعث بزرگ‌نمایی و کوچک‌نمایی کدهای ایجاد شده می‌شوند تا بتوانید همه کدها را در صفحه ببینید و یا اینکه بخشی را با بزرگ‌نمایی بیشتری ببینید.

ساخت بازی سوپر ماریو ساده

گام‌های ایجاد یک بازی

در هنگام طراحی هر بازی ابتدا نیاز به داشتن سناریو دارید. در یک سناریو نیاز است شما مفاهیم بازی و داستان آن را تعریف کنید، شخصیت‌ها و محیط بازی را مشخص کنید، همچنین نوع فعالیت هر شخصیت، واکنش‌ها و امتیازدهی بازی باید در ابتدای کار مشخص شود.

یافتن کاراکتر مناسب

به‌طور مثال در یک بازی ساده مانند سوپر ماریو ابتدا نیاز به تعریف کاراکتر این فرد دارید. این کاراکتر را می‌توانید در نرم‌افزارهایی مانند کورل دراو یا ایلاستریتور ایجاد کنید و یا درصورتی که کاراکتر از قبل موجود است از طریق موتورهای جستجو فایل آن را بیابید و دانلود کنید.

طراحی رابط کاربر: پس از یافتن کاراکترهای مناسب لازم است رابط کاربر و فضای بازی مناسب و جذابی را برای بازی طراحی کنید.

کدنویسی: نیاز به کدنویسی و حرکت دادن کاراکترها با توجه به سناریوی موجود دارید.

افزودن صدا و موسیقی: در مرحله بعدی برای ایجاد جذابیت بیشتر ارتباط برقرار کردن بازیکن با بازی می‌توانید از صدا و موسیقی بهره ببرید.

مرحله تست و رفع خطاهای احتمالی: بازی باید تست شود و ایرادات احتمالی یا اگر جایی نیاز به تغییراتی برای بهتر شدن بازی وجود دارد مشخص شود. در این مرحله علاوه برخودتان می‌توانید از دوستان و آشنایان نیز کمک بگیرید.

انتشار بازی: انتشار بازی و بازاریابی برای فروش محصول ایجاد شده

توسعه و بهینه‌سازی: تحقیق و یادگیری بیشتر و در صورت لزوم بهینه کردن محصول ایجاد شده

1- سناریو

یک کاراکتر دارید که در صفحه به سمت چپ و راست حرکت می‌کند. می‌توانید این کاراکتر را خودتان طراحی کنید.

برای حالت‌های مختلف حرکت کاراکتر، نیاز به طراحی همان حالت دارید. هر چه تعداد این تصاویر و حالت‌های آن بیشتر باشد انیمیشن ایجاد شده حرکت طبیعی‌تری خواهد داشت (شکل 86).

در این بازی قرار است، یک سکه از بالابه‌پایین بیفتد و با کمک ضربه‌زدن روی صفحه گوشی جهت حرکت کاراکتر تغییر کند و به سمت سکه برود. درصورتی که کاراکتر با سکه برخورد کند (بتواند سکه را دریافت کند) به عبارتی مختصات بخشی از سکه با مختصات کاراکتر برابر شود، یک امتیاز دریافت می‌کند. وقتی یک سکه دریافت شود و یا روی زمین بیفتد (در صورت روی زمین افتادن سکه، کاراکتر سکه را نگرفته و امتیازی دریافت نکرده)، حال چه سکه دریافت شده باشد و چه روی زمین افتاده باشد برای ادامه بازی، سکه دیگری با محل شروع تصادفی (این مکان تصادفی هر موقعیتی از سمت راست صفحه تا چپ صفحه می‌تواند باشد) در صفحه مجدد از بالا به پایین می‌افتد. هر زمانی 10 امتیاز کسب شود، بازی به مرحله بالاتر صعود می‌کند. در مرحله بالاتر سرعت افتادن سکه کمی بیشتر می‌شود و رنگ محیط برای جذابیت بیشتر، به‌صورت تصادفی تغییر می‌کند.

2- طراحی رابط کاربر

برای شروع کار باید محیط را طراحی کنید و اشیای مورد نیاز را در صفحه قرار دهید (شکل 87). به یک Canvas (بوم نقاشی) برای مشخص نمودن فضای کلی بازی و یک Canvas برای شبیه‌سازی سطح زمین نیاز دارید، یک ImageSprite برای قراردادن کاراکتر آدمک، یک Ball برای طرح سکه (نام آن را به coin تغییر دهید).

- چهار Lable (یک Lable که عنوان آن ”Score“ را نمایش می‌دهد).

- ابتدا آن را انتخاب و متن داخل گزینه Text را در ستون Properties انتخاب کرده و Score را تایپ کنید. دکمۀ Rename را کلیک کنید و نام آن را نیز به ”score“ تغییر دهید.

- Lable بعدی عدد با Score (امتیاز کسب شده توسط کاربر) که در بخش Text به وارد کردن مقدار نیازی نیست و در هنگام کدنویسی این مقدار تغییر می‌کند.

- Lable بعدی کلمه ”Stage“ (مرحله) را در ستون Properties گزینه Text را انتخاب کنید و عبارت Stage را تایپ کنید. نام آن را نیز به ”Stage“ تغییر دهید.

- بعدی مقدار عدد مرحله‌ای که در آن هستید نمایش می‌دهد.

- یک Timer picker برای زمان‌سنج که بتوانید حرکت مداوم سکه را با کمک آن ایجاد نمایید.

3- کدنویسی

سپس باید از سربرگ Blocks، با توجه به سناریوی موجود برای اشیا اقدام به کدنویسی کنید.

متغیرها: بخشی از حافظه هستند که برای ذخیره اطلاعات اختصاص داده شده به برنامه مورد استفاده قرار می‌گیرند. این اطلاعات می‌تواند شامل اطلاعات ورودی و یا نتایج به دست آمده درون یک برنامه باشند، مثل امتیاز به دست آمده از یک بازی.

هر متغیر از سه بخش تشکیل شده است:

عنوان: اسم متغیر را در زمان ساخته شدن به متغیر اختصاص داده می‌شود.
نوع: هر متغیر می‌تواند نوع خاصی از داده را در خود ذخیره و پشتیبانی کند. شما نمی‌توانید مقدار عددی را در یک متغیر از نوع متنی ذخیره کنید.
مقدار: که در بخشی از حافظه ذخیره شده که قابل تغییر می‌باشد.

برای تعریف متغیر در ستون Blocks در بخش Built in روی گزینه Variables کلیک کنید (شکل 88).

از کادر ظاهر شده که شامل بلوک‌های آن است، اولین بخش یعنی initialize global را به منظور تعریف متغیر سراسری برداشته و به بخش viewer انتقال دهید.

در بخش name کلیک کرده و عنوان step را تایپ کنید.

دوباره وارد بخش Built in شوید و برای تعیین نوع داده عددی وارد شده در متغیر گزینه Math را کلیک و سپس عنصر اول را در کنار عنصر initialize قرار دهید (شکل 89).

این مراحل را برای تعریف متغیر level_number تکرار کنید.

متغیرهای step و level_number را به‌صورت سراسری (global) تعریف کنید تا در تمام بلوک‌های برنامه قابل استفاده باشند. درصورتی که متغیر محلی (local) تعریف شود و در یک بلوک برنامه باشد، این متغیر فقط در همان بلوک قابل شناسایی است. متغیر level_number یک شمارنده است. این شمارنده از صفر شروع می‌شود و هر بار یک عدد به آن اضافه می‌شود، هرگاه این شمارنده به ده برسد، بازی به مرحله بالاتر می‌رود و برای محاسبه زمان رفتن به مرحله بالاتر شمارنده مجدد صفر می‌شود. همچنین متغیر step برای مشخص کردن اینکه کاراکتر در حال قدم زدن کدام تصویرش (در این مثال چهار تصویر برای کاراکتر طراحی شد) در بازی نمایش داده شود، استفاده می‌شود.

در ستون Blocks گزینه Screen1 و سپس Canvance1 را انتخاب و روی عنصر coin کلیک کنید از میان بلوک‌های نمایش داده شده عنصر when coin. CollidedWith را در صفحه viewer قرار دهید.

بلاک CollidedWith برای بررسی برخورد (تصادف) بین دو شیء در عنصر Canvas استفاده می‌شود. این بلاک به شما اجازه می‌دهد تا تشخیص دهید که آیا دو شیء (مانند اشکال یا تصاویر) که بر روی Canvas رسم شده‌اند، با یکدیگر برخورد کرده‌اند یا خیر. (برای تشخیص برخورد کافیست موقعیت مکانی بخشی از دو تصویر با یکدیگر برابر شود).

عملکرد CollidedWith و نحوه استفاده از آن در برنامه

ورودی‌ها: این بلاک معمولاً به دو شیء (مانند یک دایره و یک مستطیل) نیاز دارد که می‌خواهید بررسی کنید آیا با یکدیگر برخورد کرده‌اند یا نه.

خروجی: وقتی که دو شیء باهم برخورد کنند، می‌توانید از این بلاک برای انجام یک عمل خاص استفاده کنید، مانند تغییر رنگ یکی از اشیا، حذف یک شیء یا افزایش امتیاز در یک بازی.

نحوه استفاده

انتخاب اشیا: ابتدا باید دو شیء را که می‌خواهید بررسی کنید انتخاب کنید.
استفاده از بلاک CollidedWith: این بلاک را درون رویدادهای مربوط به حرکت یا تعاملات کاربر قرار دهید تا به‌طور مداوم بررسی کند که آیا اشیا با یکدیگر برخورد کرده‌اند.
تعریف رفتار بعد از برخورد: بعد از تشخیص برخورد، می‌توانید اقدامات مختلفی را انجام دهید، مانند تغییر موقعیت اشیا، نمایش پیام، یا افزایش امتیاز.

شما یک بازی دارید که در آن یک توپ باید به یک مستطیل برخورد کند. با استفاده از بلوک CollidedWith، می‌توانید تعیین کنید که وقتی توپ به مستطیل برخورد کرد، امتیاز کاربر افزایش یابد و توپ به یک موقعیت جدید منتقل شود.

در این بازی بلوک coin.CollidedWith زمانی اجرا می‌شود که سکه به شیء دیگری برخورد کند چون تنها شیء موجود در صفحه کاراکتر هست در نتیجه در این حالت یعنی کاراکتر ما موفق شده سکه را بگیرد (شکل 90). سکه فقط حرکت عمودی دارد در نتیجه یا به کاراکتر ما برخورد می‌کند یا به زمین می‌افتد. در صورت برخورد، برای ادامه بازی سکه جدید در صفحه ظاهر می‌شود.

- در این بلوک ابتدا یک صدا به‌منظور نشان دادن موفقیت کاراکتر پخش می‌شود برای افزودن شیء صدا در سربرگ Design ستون Components از گروه Media شیء sound را به صفحه viewer  بکشید. شیء sound در زمان اجرا و در صفحه طراحی نمی‌شود و در پایین ستون viewer قرار می‌گیرد.

- در ستون سمت راست روی دکمه ...Uploade file کلیک و یک فایل صدا را آپلود کنید.

- در ستون Blocks از دستۀ canvans1 روی شیء Sound1 کلیک کنید و از بلوک‌های نمایش داده شده عنصر  را به بلوک when اضافه کنید (شکل 90).

در این مرحله از بخش Built in روی گزینۀ Control کلیک کرده و عنصر  را به بلوک قبلی مطابق شکل 90 اضافه کنید. که برخورد سکه به کارکتر را بررسی می‌کند و در صورت برخورد، به امتیاز یکی اضافه می‌شود، برای اضافه کردن این بلوک از بخش variable عنصر  را به بلوک if اضافه کنید و در کادر باز شوی آن "other" را انتخاب کنید.

شیء (Scor (labele را از بخش score1 کلیک و عنصر  و از Built-in گزینهٔ math عنصر  را به بلوک در مقابل then اضافه کنید. در بخش‌های خالی بعد از کلیک روی شیء Scor عنصر  و برای کامل کردن قسمت خالی بعد، از بخش Built-in روی math کلیک و عنصر  را انتخاب و مقدار عدد آن را به 1 تغییر داده و این تکه از بلوک را کامل کنید. با اجرای این بلوک در صورت برخورد سکه با کاراکتر یک واحد به Scor اضافه شود (شکل 91).

از بخش variable عنصر  را به بلوک قبل اضافه کنید و سپس از کادر باز شوی آن گزینه global level_number را انتخاب کنید. شیء coin انتخاب و عنصر  را اضافه کرده و قسمت‌های خالی آن را با توجه به شکل 91 کامل کنید. با این کار یک واحد به مرحله که همان متغیر level number است اضافه می‌شود (شکل 91).

چون این سکه دریافت شده، سکه دیگری در صفحه ظاهر می‌شود، برای این بخش مطابق شکل 92 بلوک‌ها را اضافه کنید. این بخش از بلوک موقعیت Y سکه را مساوی عدد صفر قرار می‌دهد، (سکه هر بار از بالا می‌افتد). و موقعیت X سکه به یک عدد تصادفی بین صفر و عرض Screen تنظیم می‌شود.

سپس بررسی می‌شود اگر ده امتیاز کامل دریافت شده به تعداد مراحل اضافه می‌شود (عملاً بازی به مرحله بالاتر می‌رود) و رنگ محیط به‌طور تصادفی تغییر می‌کند. مجدداً شمارنده level_mumber با صفر برابر می‌شود تا شمارش مرحله بعدی را شروع کند. همچنین به ویژگی Speed از شیء سکه یک واحد اضافه می‌شود تا سرعت افتادن سکه بیشتر شود (شکل 93).

بلوک Screen1.Initialize (شکل 94) زمانی اجرا می‌شود که یک صفحه بازی باز می‌شود و برای تعریف و مقداردهی اولیه به متغیرهای سراسری (global variables) استفاده می‌شود. این متغیرها می‌توانند در هر نقطه از برنامه مورد استفاده قرار گیرند و به شما اجازه می‌دهند تا داده‌ها را بین رویدادها و بلاک‌های مختلف به اشتراک بگذارید. در شروع اجرا برنامه موقعیت اولیه کاراکتر را تعیین می‌کند و تصویر r1.png را نمایش می‌دهد. از طریق ویژگی Speed سرعت حرکت و ویژگی Heading جهت حرکت سکه را مشخص کنید (مقدار Heding می‌تواند عددی بین 0 تا 360 باشد. مقدار 0 حرکت رو به راست، 90 رو به بالا، 80 رو به چپ، 270 رو به پایین و اعداد دیگر حرکت شیب‌دار را به سکه می‌دهند).

بلوک Clock.Timer به صورت دائمی پس از گذشت مدت زمانی مشخص که برای زمان‌سنج قبلاً مشخص شده (ویژگی TimerInterval زمان‌سنج) ابتدا بررسی می‌کند اگر سکه به زمین رسیده؛ در این حالت سکه با کاراکتر برخورد نکرده، از موقعیت تصادفی دیگری سکه بعدی در صفحه ظاهر و شروع به افتادن می‌کند (شکل 95).

در صورتی که کاربر روی صفحه گوشی ضربه بزند بلوک Canvas.Touched اجرا می‌شود (شکل 95).

رویداد Touched این امکان را می‌دهد که عملیاتی را زمانی که کاربر یک عنصر قابل لمس (مانند دکمه، تصویر، یا هر عنصر دیگری) را لمس می‌کند، انجام دهید. این رویداد اجازه می‌دهد تا واکنش‌های مختلفی را به تعاملات کاربر با رابط کاربری برنامه‌تان اضافه کنید.

ابتدا یک رقم به تعداد گام‌های برداشته شده توسط کاراکتر اضافه می‌شود، سپس بررسی می‌شود که ضربه روی گوشی در کدام سمت کاراکتر هست و نیاز است کاراکتر به سمت چپ برود یا راست. درصورتی که نیاز باشد به سمت راست برود به موقعیت X کاراکتر 10 واحد اضافه می‌شود و در صورت نیاز به رفتن به سمت چپ به ویژگی X ده واحد کم می‌شود.

حال برای شبیه‌سازی حالت قدم برداشتن کاراکتر تعداد گام برداشته شده را تقسیم بر 4 می‌کنید (چرا عدد چهار؟ به این دلیل که چهار تصویر متفاوت برای کاراکتر طراحی کرده‌اید) حال با توجه به  باقی‌مانده تقسیم یکی از چهار تصویر طراحی شده در ویژگی Picture بارگذاری می‌شود.

چون ممکن است کاربر در قسمتی که به عنوان زمین در نظر گرفته‌اید ضربه بزند همین روال برای Canvas2.Toched نیز کپی می‌شود.

افزودن صدا، انیمیشن، تصاویر

برای افزودن صدا به بازی چندین روش وجود دارد.

در بخش media ابزارهای صدا قرار دارند. روش اول شبیه آنچه برای بازی سوپرماریو استفاده شد. یک شیء Sound در صفحه قرار دهید و فایل صوتی مورد نیاز را نیز بارگذاری کنید. حال کدهای Play و Stop در قسمت بلاک کمک به پخش یا نگه‌داشتن صدا می‌نند.

در صورتی که فایل صوتی طولانی‌تر از نیاز شماست ابتدا توسط نرم‌افزارهای برش صدا مقدار لازم را از فایل اصلی جدا نمایید. شکل 97 بلاک‌های مختلف شیء Sound می‌باشد.

تفاوت شیء Player و Sound در این است که Player برای فایل‌های صوتی طولانی به کار می‌رود.

ابزار صوتی بعدی TextToSpeech می‌باشد. این ابزار یک متن نوشته شده را به صوت تبدیل می‌کند.

یک روال speak دارد که باید یک متن را به آن بدهیم (تصویر 98).

ابزار صوتی بعدی SoundRecorder می‌باشد. این ابزار صدای کاربر را در یک فایل صوتی ذخیره می‌کند.

ابزار صوتی دیگر SpeechRecognizer می‌باشد. متوسط این ابزار می‌توانید یک دستیار صوتی ایجاد کنید.

کد بخش اول صدای صحبت شما را به متن تبدیل می‌کند. کد بخش دوم این کد را در یک کادر متن نگه می‌دارد تا در بخش‌های دیگر بتوانید استفاده کنید (شکل 99).

برای افزودن انیمیشن، دقت داشته باشید که تصاویر با فرمت GIF. در این نرم‌افزار هنگام پخش به‌صورت ثابت قرار دارند، در نتیجه شما دو روش برای متحرک‌سازی دارید.

روش اول روشی است که در بازی سوپر ماریو برای ساخت حالت راه رفتن کاراکتر استفاده کردید، باید چندین تصویر داشته باشید که در فواصل خاصی این تصاویر با هم جابه‌جا شوند و به مخاطب حس حرکت را القا کنند. این کار را به صورت دستی وقتی نقاشی‌هایی را به صورت فریم به فریم در گوشه دفتر رسم می‌کنید و به سرعت ورق می‌زنید قبلاً انجام داده‌اید.

روش دوم استفاده از یک افزونه (Extention) پخش فایل‌‌های GIF به نام KIO4.AnimatedGif می‌باشد. این Extention را ابتدا باید دانلود کنید.

در صفحه Design بخش Palette گزینه Import Extention قرار دارد. پس از Import به‌راحتی این شیء را در صفحه اضافه کنید (شکل 100).

- در این مرحله در بخش بلاک تنظیمات لازم را به شکل اضافه کنید (شکل 101).

برای نمایش Gif نیاز به یک Layout برای محل نمایش و نام فایل که قبلاً در بخش Media آپلود شده دارید.

افزودن تصاویر

ابزار image: در مورد این ابزار باید توجه داشته باشید که اگر خاصیت Animation شیء Image را برابر یک فایل Gif قرار دهید در زمان اجرا یک تصویر ثابت می‌بینید.
ابزار ImageSprite: این ابزار همراه با Canvas برای افزودن تصاویر به صفحه اضافه می‌شود.

ایجاد بازی ریختن تاس

سناریو: می‌خواهید تصویر یک تاس روی صفحه باشد، با تکان دادن گوشی تاس جدید ریخته شود، عدد نمایش داده شده، خوانده شود.

برای حالت‌های مختلف تاس نیاز به تصاویر مرتبط با آن دارید (شکل 102).

چون نیاز دارید تکان دادن گوشی را بازی دریافت کند باید از حسگرهای گوشی استفاده کنید. از بخش Sensor ابزار AccelerometerSensor را به صفحه بازی اضافه کنید.

در ابتدای کار دو متغیر number و Choose تعریف کنید.

همچنین برای اینکه صفحه خالی نباشد تصویر تاس شش‌تایی را در صفحه قرار دهید (شکل 103).

در ادامه توسط بلاک shaking کد لازم در صورت تکان دادن گوشی را ایجاد کنید. توسط تابع Random یک عدد تصادفی بین 1 تا 6 تولید و در متغیر number نگهداری می‌شود.

حال تصویر تاس مربوط به این عدد تصادفی در صفحه نمایش داده می‌شود و شماره عدد خوانده می‌شود (شکل 104).

آزمایش و اشکال زدایی

هنگامی که برنامه‌ای ایجاد می‌کنید، فارغ از نوع زبان برنامه‌نویسی، هرگز برای اجرا تا مرحله آخر و تکمیل شدن برنامه صبر نکنید، بلکه در هر مرحله برنامه را تست و خطایابی کنید.

به‌طور کلی دو نوع خطای برنامه‌نویسی وجود دارد:

دسته اول خطاهایی هستند که در منطق برنامه ایجاد شده‌اند. یافتن این خطاها معمولا وقت‌گیر می‌باشد. به‌طور مثال فرض کنید قصد داشته‌اید در هر مرحله امتیاز کسب شده روی صفحه نمایش داده شود. حال در فرمول محاسبه امتیاز به جای اینکه در هر مرحله امتیاز قبلی با عدد جمع زده شود به اشتباه به جای دستور $a = a + 1$ شما دستور $a = 1$ را نوشته باشید. برنامه بدون خطا اجرا می‌شود؛ اما خروجی آنچه شما انتظار داشتید نیست.

برای رفع این نوع خطا باید تمامی برنامه و منطق آن را بخش به بخش بررسی کنید که معمولاً کار دشواری است.

دسته دوم خطاهایی است که در بخش بلاک مشاهده می‌شوند. در پایین پنجره Blocks (شکل 105) مشاهده می‌کنید.

مثلث زرد رنگ به معنای هشدار می‌باشد. خطاهای این قسمت اشکالی در روند اجرای برنامه ایجاد نمی‌کنند، و عموماً مربوط به بلاک‌هایی هستند که به این بخش اضافه شده‌اند؛ اما در هیچ قطعه‌ای استفاده نشده‌اند و در عمل بلااستفاده می‌باشند. به تصاویر 106 توجه کنید.

نوع دیگری از خطا که با دایره قرمزرنگ نشان‌داده‌شده Error می‌باشد. این خطا ممکن است در اجرای برنامه اختلال ایجاد کند.

مواردی که یک بلاک را کپی می‌گیرید و تغییر نام نمی‌دهید می‌تواند باعث بروز این خطا گردد. فرض کنید با اجرای دستور Duplicate شما دو بلاک کلیک روی یک دکمه ایجاد کرده باشید، در این حالت Error نمایش داده می‌شود.

یا اینکه در یک بلاک دستور بخشی از دستور شبیه تصاویر زیر جا افتاده باشند. همان‌طور که در تصویرهای زیر مشاهده می‌کنید بخش دوم دستور به آن متصل نشده و خطا به وجود آمده است (شکل 107).

برای دیدن این خطاها کافی است روی مثلث رو به بالا یا پایین کلیک کنید و خطا را در صفحه مشاهده کنید و نسبت به رفع آن اقدام کنید.

رفع خطا می‌تواند شامل حذف دستورات اضافه و یا اصلاح خطوطی که در آن‌ها خطا اتفاق افتاده باشد.

بهینه‌سازی و بهبود بازی‌ها

ثبت نام در فروشگاه بازار و آپلود یک اپلیکیشن

پس از تکمیل یک بازی، آن را باید در اختیار افرادی تحت عنوان تیم تست قرار دهید و بازخوردهایی از تجربه کار با نرم‌افزار تهیه کنید. با توجه به بازخوردها و ایده‌های افراد، سعی در ترمیم و رفع خطاها و یا بهبود نرم‌افزار داشته باشید.

آزمایش و اجرای برنامه

1- استفاده از دستگاه اندرویدی واقعی (تبلت، تلفن هوشمند، ....) با اتصال WiFi:

- برنامه MIT AI2 Companion را از طریق جستجو در موتورهای جستجو و یا فروشگاه‌های اینترنتی می‌توانید دانلود و در دستگاه نصب نمایید.

- رایانه‌ای که برنامه طراحی شده در آن قرار دارد و دستگاه اندرویدی که برنامه دانلود را روی آن نصب کرده‌اید را به یک شبکه Wi Fi مشترک متصل کنید.

- در دستگاه اندروید برنامه را اجرا کنید. شکل 108 ظاهر می‌شود.

- حالا در رایانه وارد پروژه‌ای که قصد آزمایش و توسعه آن را دارید، شوید.

- از منوی Connect گزینه AI Companion را انتخاب کنید (تصویر 109).

- حالا تصویر 110 نمایش داده می‌شود. در این پنجره یک کد شش حرفی و یک QR Code نمایش داده می‌شود. در هنگام باز کردن برنامه MIT AI2 Companion نصب شده در گوشی همراه شکل 109 دیده می‌شود حال با انتخاب خودتان یا در نوار کد شش حرفی را تایپ کنید و دکمه Connect with code را بزنید، یا از طریق دکمه Scan QR code کد QR نمایش داده شده را با کمک دوربین گوشی همراه، از روی صفحه مانیتور رایانه‌ای که شکل 110 را آنجا می‌بینید اسکن کنید، پس از انجام این مرحله، برنامه در گوشی همراه شما به راحتی اجرا می‌شود.

2- اجرای نرم‌افزار در شبیه‌سازی

برنامه‌ها را با شبیه‌ساز آزمایش کنید.

- برای این کار باید نرم‌افزار شبیه‌ساز را بر روی رایانه خود نصب نمایید سپس از App Inventor استفاده کنید.

- پس از تولید بازی، از طریق منوی Build نرم‌افزار را با فرمت APK. ذخیره کنید. این خروجی برای نصب در انواع گوشی‌های اندرویدی مناسب است (شکل 109). این فایل را به داخل شبیه‌ساز درگ کنید و صبر کنید تا نصب شود. سپس اجرا کنید. در این حالت صفحه برنامه شبیه‌ساز، شبیه گوشی همراه می‌شود و می‌توانید برنامه را در آن اجرا کنید.

در منوی Build گزینه دیگری نیز به صورت aab. وجود دارد. این فرمت جدیدی است که گوگل به جای APK. ارائه داده و هنوز فراگیر نشده است. اما مراحل ساخت این نوع خروجی تفاوتی با APK. ندارد و در نهایت فقط فایل قابل دانلود را می‌دهد و QR Code به شما نمی‌دهد.

برنامه‌های خود را با Chromebook آزمایش کنید.

از سال 2019 به بعد، بیشتر کروم بوک‌ها (Chrome book) قابلیت اجرای برنامه‌‌های اندروید را دارند. بنابراین شما می‌توانید؛

1- برنامه‌های اندرویدی خود را در همان کروم بوک بسازید (ایجاد کنید).

2- در همان جا آزمایش (تست) کنید.

3- سپس برنامه را اجرا کنید.

یعنی نیازی به استفاده از یک رایانه دیگر یا گوشی جداگانه برای تست برنامه نیست.

3- اجرای برنامه با استفاده از دستگاه اندروید و کابل USB

می‌توانید گوشی را از طریق کابل usb مستقیم به رایانه متصل کنید و برنامه نوشته شده را از طریق نرم‌افزار MIT AI2 Companion اجرا کنید. سپس این برنامه را در گوشی خود نصب کنید. با توجه به قوانین موجود ممکن است خطایی برای ناشناخته بودن منبع نرم‌افزار نمایش داده شود که مشکلی نیست، این پیغام خطا را تأیید کنید و کار را ادامه دهید.

انتشار برنامه

برنامه را بعد از آزمایش و اطمینان از علکرد آن می‌توانید از طریق پیام‌رسان و یا فروشگاه‌های اینترنتی از قبیل بازار و... انتشار دهید. شما برای کسب درآمد نیاز به انتشار برنامه در فروشگاه‌های اینترنتی دارید.

قبل از انتشار بازی باید ابتدا بازی را به نام خودتان ثبت کنید تا شخص دیگری نتواند به نام خودش از بازی شما سوء استفاده کند. App Inventor امکان ساخت Key Store (امضا) را به شما می‌دهد. این Key Store را می‌توانید ثبت کنید که در پنل راهنما فروشگاه‌های اینترنتی در مورد امضای نرم‌افزار ایجاد شده توضیحات کاملی داده شده است. در صورت نبودن این امضا در زمان نصب به کاربر هشدار داده می‌شود که ایجادکننده برنامه را نمی‌شناسم و کاربر بابت این هشدار ممکن است برنامه شما را نصب نکند. کافی است تنها یک بار این امضا را دریافت و ثبت کنید سپس برای سایر پروژه‌ها همین امضا را آپلود کنید.

پس از ثبت نام و امضای قراردادهای لازم، فایل خود را می‌توانید آپلود کنید.

آپلود Apk: در ابتدا فایل خود را باید در فروشگاه آپلود کنید، باید دقت داشته باشید که نام و یا نشان یک برند را استفاده نکرده باشید.

اطلاعات پایه: در مرحله بعدی اطلاعاتی در مورد معرفی بازی می‌پرسد.

اطلاعات برنامه: نام فارسی برنامه، توضیحاتی در مورد برنامه را باید ثبت کنید. این توضیحات برای معرفی برنامه به کاربران است.

اطلاعات پشتیبانی: اطلاعاتی را وارد می‌کنید که اگر کاربران در اجرای برنامه به مشکل خوردند از چه طریقی با شما در ارتباط باشند.

آپلود تصاویر و آیکون برنامه: حداقل دو تصویر با کیفیت از برنامه را باید انتخاب کنید تا فروشگاه به عنوان تبلیغ بازی به کاربران نمایش دهد. همچنین در این قسمت نیاز به نام و نسخه بازی دارید.

بررسی نهایی قبل از انتشار: فروشگاه برنامه شما را بررسی می‌کند و درصورتی که مشکلی وجود نداشته باشد آن را انتشار می‌دهد.